{block:style}
<style>
    .fw-initial{
        font-weight: initial!important;
    }
    .card-item {
        padding: .5rem .5rem 0 .5rem;
    }
    .card-item>*{
        margin-bottom: 5px;
    }
    .card-item .card-img-top:hover {
        cursor: pointer;
    }
    .top{
        border-bottom: 1px #00000015 solid;
        margin-bottom: 1rem;
    }
    .bb-solid{
        border-bottom: 1px #00000008 solid;
    }
    .top h3{
        font-size: 16px;
        font-weight: normal;
        line-height: 20px;
        color: #333;
        display: inline-block;
    }
    .recommend .form-group {
        margin-bottom: 0px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .btn-del-item {
        position: absolute;
        right: 0;
    }
    .custom-control-label {
        vertical-align: sub;
    }
    .card-item .itemid {
        position: absolute;
        top: 4px;
        right: 4px;
        background-color: #ffffff;
        padding: 3px;
        border-radius: 4px;
    }
    .custom-control-label::before {
        top: 0.15rem;
    }
    .custom-switch .custom-control-label::after {
        top: calc(0.15rem + 2px);
    }
    .img-thumbnail {
        width: 100%;
        height: 210px;
        object-fit: cover;
    }
</style>
{/block:style}
<form role="form" action="" class="frm-operate" method="post">
    <div class="card card-primary">
        <div class="card-body recommend">
            <div class="top">
                <a href="javascript:history.back()" class="text-primary">
                    <i class="fas fa-reply"></i>
                </a>
                <h3>{:lang('Add')}</h3>
            </div>
            <div class="form-group row bb-solid">
                <label for="frm-name" class="col-sm-2 col-12 col-form-label">{:lang('Mark')}: </label>
                <div class="col-sm-8 col-12">
                    <input type="text" id="frm-name" class="form-control" name="row[name]" placeholder="{:lang('Used for label calls to keep unique')}" data-rule="required">
                </div>
            </div>
            <div class="form-group row bb-solid">
                <label for="frm-title" class="col-sm-2 col-12 col-form-label">{:lang('Title')}: </label>
                <div class="col-sm-8 col-12">
                    <input type="text" id="frm-title" class="form-control" name="row[remark]">
                </div>
            </div>
            <div class="form-group row bb-solid">
                <label class="col-sm-2 col-12 col-form-label">{:lang('Type')}: </label>
                <div class="col-sm-8 col-12 type-op">
                    {:build_radios('row[type]',['1'=>lang('banner'),'2'=>lang('Video'),'3'=>lang('Html'),'4'=>lang('Content data'),'5'=>lang('Links')],'1',['class'=>'form-control'])}
                </div>
            </div>

            <!--图集-->
            <div class="images-list hide-item">
                <div class="form-group row bb-solid">
                    <label class="col-sm-2 col-form-label">{:lang('Atlas')}: </label>
                    <div class="col-sm-10 d-flex align-items-center">
                        <input type="hidden" id="frm-image" value="">
                        <input type="button" class="btn btn-primary ml-1 btn-imgSelect btn-sm" data-mimetype="image/jpeg,image/png,image/gif" data-multiple="true" data-field="frm-image" value="{:lang('Select image')}">
                    </div>
                </div>
                <div class="form-group row bb-solid">
                    <label class="col-sm-2 col-12 col-form-label"></label>
                    <div class="col-sm-10 col-12" id="layer-photos-demo">
                        <div class="row banner-list">
                        </div>
                    </div>
                </div>
            </div>

            <!--视频-->
            <div class="video-list hide-item" style="display: none">
                <div class="form-group row bb-solid">
                    <label class="col-sm-2 col-12 col-form-label">{:lang('Content')}：</label>
                    <div class="col-sm-8 col-12 d-flex align-items-center">
                        <button type="button" class="btn btn-primary btn-sm btn-add-video">{:lang('Add item')}</button>
                    </div>
                </div>
                <div class="form-group row bb-solid">
                    <label for="frm-content" class="col-sm-2 col-12 col-form-label"></label>
                    <div class="col-sm-8 col-12">
                        <div class="row video-content">
                            <div class="col-md-4">
                                <div class="card card-item">
                                    <div class="fileGroup">
                                        <input type="button" data-file-num="1" class="btn btn-info mb-2 btn-imgSelect btn-xs" data-multiple="false" data-field="frm-content"
                                               value="{:lang('Select File')}">
                                        <div class="file-btn">
                                            <input type="text" class="form-control txt-files" id="frm-content" name="row[v_content][]" placeholder="{:lang('Please upload the video or specify the link')}" value="">
                                        </div>
                                    </div>

                                    <textarea class="form-control" name="row[v_title][]" placeholder="{:lang("Title")}"></textarea>
                                    <textarea class="form-control" name="row[v_url][]" placeholder="{:lang("Link")}"></textarea>
                                    <textarea class="form-control" name="row[v_notes][]" placeholder="{:lang("Description")}"></textarea>
                                    <input type="hidden" class="form-control mb-1" name="row[v_weigh][]" placeholder="{:lang("Weigh")}">
                                    <div class="custom-control custom-switch custom-switch-on-teal" style="display: initial;">
                                        <input type="checkbox" class="custom-control-input checked-new" id="customSwitch">
                                        <input type="hidden" name="row[v_new_window][]" value="0">
                                        <label class="custom-control-label fw-initial" for="customSwitch">{:lang("New window")}</label>
                                        <a href="#" class="btn btn-danger btn-xs btn-del-item">{:lang("Delete")}</a>
                                    </div>
                                    <div class="itemid"><i class="fas fa-arrows-alt"></i></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!--文字链接-->
            <div class="txt-list hide-item"  style="display: none">
                <div class="form-group row bb-solid">
                    <label class="col-sm-2 col-form-label">{:lang('Links')}: </label>
                    <div class="col-sm-10 d-flex align-items-center">
                        <input type="button" class="btn btn-primary btn-sm btn-add-link" value="{:lang('Add item')}">
                    </div>
                </div>
                <div class="form-group row bb-solid">
                    <label class="col-sm-2 col-12 col-form-label"></label>
                    <div class="col-sm-8 col-12">
                        <div class="row txt-item-list">
                        </div>
                    </div>
                </div>
            </div>

            <!--HTML内容-->
            <div class="html-block hide-item" style="display: none">
                <div class="form-group row bb-solid">
                    <label class="col-sm-2 col-12 col-form-label">{:lang('HTML Content')}：</label>
                    <div class="col-sm-8 col-12 fileGroup">
                        <textarea class="form-control" name="row[html_content]" placeholder="{:lang("HTML Content")}" rows="8"></textarea>
                    </div>
                </div>
            </div>

            <!--文章内容-->
            <div class="article-block hide-item" style="display: none">
                <div class="form-group row J-model">
                    <label class="col-sm-2 col-12 col-form-label">{:lang('Model')}: </label>
                    <div class="col-sm-8 col-12">
                        <div class="radio-group">
                            {volist name="modelList" id="vo"}
                            <input id="row[model]-{$key}" {if $key==0}checked="checked"{/if} name="row[model]" type="radio" value="{$vo['id']}"><label for="row[model]-{$key}">{$vo['name']}</label>&nbsp;
                            {/volist}
                        </div>
                    </div>
                </div>
                <div class="form-group row J-column">
                    <label class="col-sm-2 col-12 col-form-label">{:lang('Column')}: </label>
                    <div class="col-sm-8 col-12">
                        <div class="radio-group">

                        </div>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-12 col-form-label">{:lang('Limit')}: </label>
                    <div class="col-sm-5 col-12">
                        <input type="text" class="form-control" name="row[limit]" value="10">
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-12 col-form-label">{:lang('Order')}: </label>
                    <div class="col-sm-5 col-12">
                        <input type="text" class="form-control" name="row[order]" placeholder="默认：weigh desc,id desc">
                    </div>
                </div>
            </div>
        </div>
        <div class="card-footer">
            <div class="row">
                <div class="col-sm-2"></div>
                <div class="col-sm-8">
                    <button type="submit" class="btn btn-primary btn-submit">{:lang('Submit')}</button>
                    <button type="reset" class="btn btn-default">{:lang('Reset')}</button>
                </div>
            </div>
        </div>
    </div>
</form>
{block:script}
<script>
    require(['jquery','jquery-ui','Form','layer'], function ($, undefined, Form, undefined) {
        $(function(){
            // 删除
            $(document).on('click', '.btn-del-item', function () {
                $(this).parents('.card-item').parent().remove();
            });

            // 监听选择的图片
            var ii = 0;
            $('#frm-image').change(function (e) {
                var imgArr = $(this).val().split(',');
                var html = '';
                $.each(imgArr, function (idx, val) {
                    html += '<div class="col-md-3">\n' +
                        '       <div class="card card-item">\n' +
                        '           <div class="card-img-top">\n' +
                        '               <img data-toggle="tooltip" data-placement="top" title="{:lang("View larger image")}" layer-src="'+val+'" src="'+val+'" class="img-thumbnail">\n' +
                        '               <input type="hidden" name="row[image][]" value="'+val+'">\n' +
                        '           </div>\n' +
                        '           <textarea class="form-control" name="row[title][]" placeholder="{:lang("Title")}"></textarea>\n' +
                        '           <textarea class="form-control" name="row[url][]" placeholder="{:lang("Link")}"></textarea>\n' +
                        '           <textarea class="form-control" name="row[notes][]" placeholder="{:lang("Description")}"></textarea>\n' +
                        '           <input type="hidden" class="form-control mb-1" name="row[weigh][]" placeholder="{:lang("Weigh")}">\n' +
                        '           <div class="custom-control custom-switch custom-switch-on-teal" style="display: initial;">\n' +
                        '               <input type="checkbox" class="custom-control-input checked-new" id="customSwitch'+ii+'">\n' +
                        '               <input type="hidden" name="row[new_window][]" value="0">\n' +
                        '               <label class="custom-control-label fw-initial" for="customSwitch'+ii+'">{:lang("New window")}</label>\n' +
                        '               <a href="#" class="btn btn-danger btn-xs btn-del-item">{:lang("Delete")}</a>\n' +
                        '           </div>\n' +
                        '           <div class="itemid"><i class="fas fa-arrows-alt"></i></div>\n' +
                        '       </div>\n' +
                        '    </div>';
                    ii++;
                })
                $('.banner-list').append(html);
                $(this).val('');
                layer.photos({
                    photos: '.card-item'
                    ,anim: 5
                });
            })

            // 新窗口
            $(document).on('click', '.checked-new', function () {
                if ($(this).is(':checked')) {
                    $(this).parent().find('input[type=hidden]').val(1);
                }else{
                    $(this).parent().find('input[type=hidden]').val(0);
                }
            });

            // 可移动拖动
            $('.banner-list').sortable({cursor:"move",items:".col-md-3",opacity:0.6});
            $('.video-list').sortable({cursor:"move",items:".col-md-4",opacity:0.6});
            $('.txt-item-list').sortable({cursor:"move",items:".col-md-4",opacity:0.6});

            $('.banner-list').tooltip()

            // 类型选择切换
            $('.type-op').change(function (e) {
                var value = $('.type-op').find('input[type=radio]:checked').val();
                $('.hide-item').hide();
                if (value==1) {
                    $('.images-list').show();
                } else if (value==2) {
                    $('.video-list').show();
                } else if (value==3) {
                    $('.html-block').show();
                } else if (value==4) {
                    $('.article-block').show();
                    $('.J-model').find('input[type="radio"]:checked').trigger('change');
                } else if (value==5) {
                    $('.txt-list').show();
                }
            });

            // 视频添加
            var inputIdx = 1;
            $('.btn-add-video').click(function (e) {
                var html = '<div class="col-md-4">\n' +
                    '         <div class="card card-item">\n' +
                    '             <div class="fileGroup">\n' +
                    '                 <input type="button" data-file-num="1" class="btn btn-info mb-2 btn-imgSelect btn-xs" data-multiple="false" data-field="frm-content-'+inputIdx+'"\n' +
                    '                        value="{:lang(\'Select File\')}">\n' +
                    '                 <div class="file-btn">\n' +
                    '                     <input type="text" class="form-control txt-files" id="frm-content-'+inputIdx+'" name="row[v_content][]" placeholder="{:lang(\'Please upload the video or specify the link\')}" value="">\n' +
                    '                 </div>\n' +
                    '             </div>\n' +
                    '             <textarea class="form-control" name="row[v_title][]" placeholder="{:lang("Title")}"></textarea>\n' +
                    '             <textarea class="form-control" name="row[v_url][]" placeholder="{:lang("Link")}"></textarea>\n' +
                    '             <textarea class="form-control" name="row[v_notes][]" placeholder="{:lang("Description")}"></textarea>\n' +
                    '             <input type="hidden" class="form-control mb-1" name="row[v_weigh][]" placeholder="{:lang("Weigh")}">\n' +
                    '             <div class="custom-control custom-switch custom-switch-on-teal" style="display: initial;">\n' +
                    '                 <input type="checkbox" class="custom-control-input checked-new" id="customSwitch'+inputIdx+'">\n' +
                    '                 <input type="hidden" name="row[v_new_window][]" value="0">\n' +
                    '                 <label class="custom-control-label fw-initial" for="customSwitch'+inputIdx+'">{:lang("New window")}</label>\n' +
                    '                 <a href="#" class="btn btn-danger btn-xs btn-del-item">{:lang("Delete")}</a>\n' +
                    '             </div>\n' +
                    '             <div class="itemid"><i class="fas fa-arrows-alt"></i></div>\n' +
                    '         </div>\n' +
                    '     </div>';
                inputIdx++;
                $('.video-content').append(html);
            });

            // 文字链接
            var linkIdx = 1;
            $('.btn-add-link').click(function (e) {
                var html = '<div class="col-md-3">\n' +
                    '         <div class="card card-item">\n' +
                    '             <textarea class="form-control" name="row[link_url][]" placeholder="{:lang("Link")}"></textarea>\n' +
                    '             <textarea class="form-control" name="row[link_title][]" placeholder="{:lang("Title")}"></textarea>\n' +
                    '             <textarea class="form-control" name="row[link_notes][]" placeholder="{:lang("Description")}"></textarea>\n' +
                    '             <input type="hidden" class="form-control mb-1" name="row[link_weigh][]" placeholder="{:lang("Weigh")}">\n' +
                    '             <div class="custom-control custom-switch custom-switch-on-teal" style="display: initial;">\n' +
                    '                 <input type="checkbox" class="custom-control-input checked-new" id="customSwitch'+linkIdx+'">\n' +
                    '                 <input type="hidden" name="row[link_new_window][]" value="0">\n' +
                    '                 <label class="custom-control-label fw-initial" for="customSwitch'+linkIdx+'">{:lang("New window")}</label>\n' +
                    '                 <a href="#" class="btn btn-danger btn-xs btn-del-item">{:lang("Delete")}</a>\n' +
                    '             </div>\n' +
                    '             <div class="itemid"><i class="fas fa-arrows-alt"></i></div>\n' +
                    '         </div>\n' +
                    '     </div>';
                linkIdx++;
                $('.txt-item-list').append(html);
            });

            // 模型更改
            $('.J-model').find('input[type="radio"]').change(function (e) {
                var id = $(this).val();
                $.post('{:url("/cms.recommend/column")}?m='+id,'',function (data) {
                    if (data.code==200) {
                        var html = '';
                        $.each(data.data, function (idx, val) {
                            html += '<input id="row[column]-'+val['id']+'" name="row[column][]" type="checkbox" value="'+val['id']+'"><label for="row[column]-'+val['id']+'">'+val['title']+'</label>&nbsp;';
                        })
                        $('.J-column').find('.radio-group').html(html);
                    } else {
                        layer.msg(data.msg);
                    }
                });
            });

            Form.api.init({success:function (data,all) {layer.msg(all.msg,{time:1000},function () {window.location.href="{:url('/cms.Recommend/index')}"});return false;}});
        })
    })

</script>
{/block:script}

